<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet">

    <script src="js/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="bootstrap/js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" >操作类型</label>
                <div class="controls">
                    <label class="radio inline">
                        <input type="radio" name="fun" id="select" value="select"> select
                    </label>
                    <label class="radio inline">
                        <input type="radio" name="fun" id="insert" value="insert"> insert
                    </label>
                    <label class="radio inline">
                        <input type="radio" name="fun" id="update" value="update" checked> update
                    </label>
                </div>
            </div>
        </form>

    </div>
    <div class="row" id="input">
        <form class="form-horizontal">
            <div class="control-group">
                <label class="control-label" for="tableName">表名</label>
                <div class="controls">
                    <input type="text" id="tableName" placeholder="表名">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="param">数据列</label>
                <div class="controls">
                    <textarea id="param" rows="2" class="span6" placeholder="数据列"></textarea>
                </div>
            </div>
            <div id="paramValue" style="height: 100px;/*display: none*/">
                <table class="table table-bordered" id="paramTable">
                    <tr>
                        <td align="right"></td>
                        <td><input type="text" class="paramValue"/> </td>
                    </tr>
                </table>
            </div>
            <div class="control-group">
                <div class="controls">
                    <div class="btn btn-default" id="create" onclick="create()">create</div>
                    <div class="btn btn-default" id="test" onclick="test()">test</div>
                </div>
            </div>
        </form>
    </div>
    <div class="row">

    </div>
    <div class="row">
        <textarea id="result" rows="10" class="span6" style="height: 100px"></textarea>
    </div>

    <div class="row" id="testrow"></div>

</div>




<script>
    $(function(){
        $("#paramValue").hide();
        $("#param").change(function(){
            var funType = $("input[name='fun']:checked").val();
            if(funType=="update" || funType=="insert"){
                $("#paramValue").show();
                var paramStr = $("#param").val();
                var param = paramStr.split(" ");
                var paramTable = $("#paramTable");
                paramTable.html("");
                for(var i=0;i<param.length;i++) {
                    paramTable.append('<tr> <td>'+param[i].trim()+'</td><td><input type="text" class="paramValue"/> </td></tr>');
                }

            }
        });
    });

    function resize(id){

    }

    function test(){
        var target = $("#testrow");
        alert($("#" + id).height());
        target.append("<input type='text'/>");
        target.append("<input type='text'/>");
        target.append("<input type='text'/>");
        alert($("#" + id).height());
    }

    function create() {
        var type = $("input[name='fun']:checked").val();
        var paramStr = $("#param").val();
        var param = paramStr.split("\n");
        var fields;
        var splitStr = ",";
        var wenhaoStr = "";
        var tableName = $("#tableName").val();
        var result;
        if(type == "update"){
            splitStr = " = ?,"
        }
        for(var i=0;i<param.length;i++) {
            fields += param[i].trim() + splitStr;
            wenhaoStr += " ?,";
        }
        fields = fields.substring(0, fields.length - 1);
        wenhaoStr = wenhaoStr.substring(0, wenhaoStr.length - 1);

        if(type=="select"){
            result = "SELECT "+ fields+" FROM "+tableName;
        }else if(type == "insert"){
            result = "INSERT INTO " + tableName + "(" + fields + ") " + "VALUES(" + wenhaoStr + ")";
        }else if(type == "update"){
            result = "UPDATE " + tableName + " SET " + fields;
        }

    }
</script>
</body>
</html>